<template>
  <span class="comm-icon" :class="classmap[type]+sizer"></span>
</template>

<script type="text/ecmascript-6">
const classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']

export default {
  name: 'icon',
  props: {
    type: null,
    size: null,
    classmap: {
      type: Array,
      default() {
        return classMap
      },
    },
  },
  computed: {
    sizer() {
      return this.size > 0 ? this.size : '';
    },
  },
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin"

  .comm-icon
    display: inline-block
    vertical-align: top
    width: 12px
    height: 12px
    margin-right: 4px
    background-size: 12px 12px
    background-repreat: no-repreat
    &.decrease
      bg-image('decrease_1')
    &.discount
      bg-image('discount_1')
    &.guarantee
      bg-image('guarantee_1')
    &.invoice
      bg-image('invoice_1')
    &.special
      bg-image('special_1')

    &.decrease3
      bg-image('decrease_3')
    &.discount3
      bg-image('discount_3')
    &.guarantee3
      bg-image('guarantee_3')
    &.invoice3
      bg-image('invoice_3')
    &.special3
      bg-image('special_3')

    &.decrease4
      bg-image('decrease_4')
    &.discount4
      bg-image('discount_4')
    &.guarantee4
      bg-image('guarantee_4')
    &.invoice4
      bg-image('invoice_4')
    &.special4
      bg-image('special_4')

  </style>
